<template>
  <!--图片上传-->
  <div :class="['upload-img',componentSetOptions.class,disabled?'upload-img-clone':'']">
    <!--
    action 上传接口地址
    show-file-list 是否显示已上传文件列表 缩略图
    list-type 文件列表的类型：文件上传后怎么布局
    on-preview 点击文件列表中已上传的文件时的钩子 uploadImgPreview
    :before-remove 删除之前提示
    on-remove 文件列表移除文件时的钩子
    auto-upload 是否在选取文件后立即进行上传
    before-upload 上传文件之前的钩子  判断是否大于小于等
    on-error  上传失败
    on-success 上传成功
    multiple 是否支持多选文件
    limit 最多可以传多少个
    on-exceed 文件超出个数限制时的钩子
    name 上传的文件字段名
    data 上传时附带的额外参数
    -->
    <!--isAll true 多图 false 单图-->
    <!--多张图片-->
    <template v-if="componentSetOptions.isAll">
      <el-upload
          :action="uploadImgUrl"
          :show-file-list="false"
          list-type="picture-card"
          :auto-upload="true"
          :before-upload="uploadImgUpload"
          :on-error="uploadImgError"
          :on-success="uploadImgSuccess"
          :multiple="componentSetOptions.multiple"
          name="photofile"
          :data="uploadImgField"
          :accept="componentSetOptions.accept"
          :disabled="disabled"
          :headers="headersData"
          :limit="componentSetOptions.limit"
          :file-list="uploadValue2"
          :on-exceed="handleExceed"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <div class="Upload-img-show">
        <!--  <ul>
            <li v-for="(item,key) in uploadValue.img" :key="key">
              <img :src="item[componentSetOptions.urlType]" @click="uploadImgClick(item)">
              <i class="el-icon-close" @click="uploadImgRemove(key)"></i>
            </li>
          </ul>-->
        <ul>
          <li v-for="(item,key) in uploadValue" :key="key">
            <el-image
                :src="item[componentSetOptions.urlType]"
                :preview-src-list="Utils.arrayMoveOne(item[componentSetOptions.urlType],uploadValue,componentSetOptions.urlType)"
            >
            </el-image>
            <i class="el-icon-close" @click="uploadImgRemove(key)"></i>
          </li>
        </ul>
      </div>
    </template>
    <!--单张图片-->
    <template v-else>
      <el-upload
          :action="uploadImgUrl"
          :show-file-list="false"
          list-type="picture-card"
          :auto-upload="true"
          :before-upload="uploadImgUpload"
          :on-error="uploadImgError"
          :on-success="uploadImgSuccess"
          :multiple="false"
          name="photofile"
          :data="uploadImgField"
          :accept="componentSetOptions.accept"
          :disabled="disabled"
          :headers="headersData"
      >

        <img
            v-if="uploadValue.length!=0"
            :src="uploadValue[0][componentSetOptions.urlType]"
        >

        <!--<img-->
        <!--    v-if="uploadValue.length!=0"-->
        <!--    :src="$store.state.env+'/'+uploadValue[0][componentSetOptions.urlType]"-->
        <!--&gt;-->

        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </template>

  </div>
</template>

<script>
export default {
  components: {},
  //uploadValue 接收值的字段
  props: ['componentSetOptions', 'uploadValue','disabled'],
  data() {
    return {
      //上传路径
      uploadImgUrl: process.env.NODE_ENV === "development" ? `http://localhost:8081/api/frame/upload/userPhoto` :`${this.$store.state.env}/api/frame/upload/userPhoto`,
      headersData: {token: `${window.localStorage.getItem('token')}`}, //上传图片的token
      //上传添加的字段
      uploadImgField: {remarks: 1},
      //图片 Dialog 显示隐藏
      uploadImgVisible: false,
      uploadImgDialogUrl: '',
      uploadImgName: '',//上传图片名称
      uploadValue2: [],
    };
  },
  created() {
  },
  mounted() {

  },
  methods: {
    //超过最大限制文件会提示
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 ${this.componentSetOptions.limit} 张图片，本次选择了 ${files.length} 张图片，共选择了 ${files.length + fileList.length} 张图片`);
    },
    //点击图片放大
    uploadImgClick(url) {
      this.uploadImgVisible = true;
      this.uploadImgDialogUrl = url[this.componentSetOptions.urlType];
    },
    // 移除文件时
    uploadImgRemove(key) {
      this.$confirm('是否需要删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.uploadValue.splice(key, 1);
        this.uploadValue2.splice(key, 1);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //上传失败的钩子
    uploadImgError() {
      this.$message.error('图片上传失败');
    },
    //上传成功钩子
    uploadImgSuccess(response, file, fileList) {
      if (this.componentSetOptions.isAll) {
        this.uploadValue2 = fileList;
        let data = response.map;
        data.name = this.uploadImgName;
        this.uploadValue.push(data);
        // let fileList2 = JSON.parse(JSON.stringify(this.uploadValue2));
        // this.uploadValue.splice(0, this.uploadValue.length)
        // for (let i = 0; i < fileList2.length; i++) {
        //   if (fileList2[i].response) {
        //     let data = fileList2[i].response.data;
        //     data.name = fileList2[i].name
        //     this.uploadValue.push(data)
        //   }
        // }
        // this.$message.warning('图片上传成功，还需要提交');
      } else {
        let data = response.map;
        data.name = this.uploadImgName;
        this.uploadValue.splice(0, this.uploadValue.length);//清空数组
        this.uploadValue.push(data);
        // this.$message.warning('图片上传成功，还需要提交');
      }


    },
    //上传文件之前的钩子
    uploadImgUpload(file) {
      console.log(file)
      this.uploadImgName = file.name;
      const isLt2M = file.size / 1024 / 1024 < this.componentSetOptions.size;
      // const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
      // if (!isJPG) {
      //   this.$message.error('上传图片只能是 JPG/PNG 格式!');
      // }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 ' + this.componentSetOptions.size + 'MB!');
        return false
      }
      // return isJPG && isLt2M;
    },
  }
  ,
}
;
</script>

<style lang="scss">
//不能上传的时候X去掉
.upload-img-clone {
  .el-icon-close {
    display: none;
  }
}

//上传
.upload-img {
  @include flex(nowrap);

  //上传的框
  .el-upload--picture-card, .el-upload-list__item {
    width: 122px;
    height: 122px;
    line-height: 122px;
    margin: 5px;
  }

  img {
    height: 120px !important;
    width: 120px !important;
    border-radius: 5px;
    cursor: pointer;
  }

  //上传后的图片
  ul {
    @include flex(wrap);

    li {
      border: 1px dashed #c0ccda;
      position: relative;
      border-radius: 5px;
      margin: 5px;
      height: 120px;

      &:hover {
        border: 1px dashed $color-primary;
      }

      i {
        position: absolute;
        top: 3px;
        right: 3px;
        font-size: 16px;
        cursor: pointer;

        &:hover {
          color: $color-primary;
        }
      }
    }
  }
}
</style>
